<!DOCTYPE html>
<html>

<head>
    <script type='text/javascript' src='https://cdn.scaledrone.com/scaledrone.min.js'></script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <script src="./js/jquery-2.1.0.js"></script>
    <style>
        body {
            height: 100vh;
            margin: 0;
            padding: 0 50px;
        }

        video {
            max-width: calc(40% - 100px);
            margin: 0 20px;
            box-sizing: border-box;
            border-radius: 2px;
            padding: 0;
            box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
        }

        .copy {
            position: fixed;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 16px;
            color: rgba(0, 0, 0, 0.5);
        }

        .con {
            width: 80%;
            margin: 0 auto;
            height: 300px;
            border-radius: 4px;
            border: 1px solid black;
            margin-top: 4%;
            background: #f5f5f5;
            box-shadow: rgba(156, 172, 172, 0.2) 0px 2px 2px, rgba(156, 172, 172, 0.2) 0px 4px 4px, rgba(156, 172, 172, 0.2) 0px 8px 8px, rgba(156, 172, 172, 0.2) 0px 16px 16px, rgba(156, 172, 172, 0.2) 0px 32px 32px, rgba(156, 172, 172, 0.2) 0px 64px 64px;
            padding: 20px;
        }

        .chat_con {
            width: 100%;
            height: 100%;
        }
        .myMessage{
            text-align: right;
        }
        .oppsiteMessage{
            text-align: left;
        }
    </style>
</head>

<body>
    <div style="display: flex; justify-content: space-between; margin-top: 14%;">
        <video id="localVideo" autoplay muted></video>
        <div>
            <button onclick="goOther()">切换</button>
            <button onclick="goOut()">退出</button>
        </div>
        <video id="remoteVideo" autoplay></video>
    </div>

    <div class="con">
        <div class="chat_con">
        </div>
        <div style="display: flex; justify-content: flex-end; width: 100%;">

            <div>
                <input type="text" id="sendMessage">
            </div>
            <button id="sendBtn">发送</button>
        </div>
    </div>
    <script>
        window.rId = "";
        function goOut() {
            window.parent.location.href = "./start.html"
        }
        function goOther() {
            window.location.href = "./mate.html"
        }
        function getUUID() {

            $.ajax({
                url: "http://localhost:8080/room_id",
                dataType: "json",
                type: "POST",
                success: function (response) {
                    if (response.code == "200") {
                        window.rId = response.data;
                        console.log("----genbg")
                        console.log(window.rId)
                        console.log("----genbg")
                    } else {
                        alert("系统错误")
                    }
                },
                error: function (res) {
                    alert("系统错误")
                    console.log(res);
                }
            })


        }

        function getCookie(cname) {
            var name = cname + "=";
            var ca = document.cookie.split(';');
            for (var i = 0; i < ca.length; i++) {
                var c = ca[i].trim();
                if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
            }
            return "";
        }
        $(function () {
            $.ajaxSetup({
                async: false
            });
            var webSocket;
            getUUID();
            let u_id = getCookie("u_id");
            console.log(u_id)
            var url = `ws://localhost:8080/room/${ window.rId}/${u_id}`;
            //进入聊天室
            webSocket = new WebSocket(url);
            webSocket.onopen = function () {
                console.log('webSocket连接创建。。。');
            }
            webSocket.onclose = function () {
                console.log("close")
                
            }
            webSocket.onmessage = function (event) {
              
                const obj = JSON.parse(event.data);
                if(obj.closeMsg == "close"){
                    window.location.href = "./mate.html"
                }
                if(obj.closeMsg == "noUser"){
                    alert("未匹配到用户")
                }else if(obj.from != u_id){
                    console.log("----------")
                    $(".chat_con").append(`<div class="oppsiteMessage">${obj.message}</div>`)
                }else{
                    console.log("------++++++++++----")
                    $(".chat_con").append(`<div class="myMessage">${obj.message}</div>`)
                }
                
            }
            webSocket.onerror = function (event) {
                console.log('webSocket连接异常。。。');
            }
            $('#sendBtn').click(function () {
                var msg = $('#sendMessage').val();
                webSocket.send(msg);
                $('#sendMessage').val('');
            });
            $("body").append('<script type="text\/javascript" src="./js/script.js"><\/script>');
        });
    </script>
    
</body>

</html>